<template>
  <div>
    <div id="container" ></div>
    <!--  <div class="input-card" style="width: 120px">-->
    <!--    <button class="btn" onclick="rectangleEditor.open()" style="margin-bottom: 5px">开始编辑</button>-->
    <!--    <button class="btn" onclick="rectangleEditor.close()">结束编辑</button>-->
    <!--  </div>-->
  </div>
</template>
<script>
export default {
  name: "Interface",
  props: {},
  mounted() {
    this.loadmap();     //加载地图和相关组件
  },
  methods: {
    loadmap() {
      //地图创建
      const map = new AMap.Map('container', {
        center: [118.1783,24.492517],
        viewMode: '3D',
        pitch: 60,
        rotation: -35,
        // 隐藏默认楼块
        features: ['bg', 'road', 'point'],
        mapStyle: 'amap://styles/light',
        layers: [
          // 高德默认标准图层
          new AMap.TileLayer.Satellite(),
          // 路网
          new AMap.TileLayer.RoadNet(),
          // 楼块图层
          new AMap.Buildings({
            zooms: [16, 18],
            zIndex: 10,
            heightFactor: 2//2倍于默认高度，3D下有效
          })
        ],
        zoom: 16
      });
      //实时路况图层
      const trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
      });
      trafficLayer.setMap(map);
      var path = [
        [118.178402,24.492799],//左上
        [118.178091,24.492741],//右上
        [118.178247,24.492379],//左下
        [118.178676,24.492516]//右下
      ];
      var polygon = new AMap.Polygon({
        map: map,
        fillOpacity:0.4,
        path: path
      });

      // 创建人员标记点
      var marker = new AMap.Marker({
        map: map,
        draggable:true,
        position: [118.178676,24.492516]
      });

      function compute(){
        var point = marker.getPosition();
        var isPointInRing = AMap.GeometryUtil.isPointInRing(point,path);
        marker.setLabel({
          content:isPointInRing?'内部':'外部',
          offset:new AMap.Pixel(20,0)
        });
      }

      compute();
      // 为marker绑定拖拽事件
      marker.on('dragging',compute)
      map.setFitView();

    }
  }
}
</script>
<style scoped>

body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%}
#container{
  width:100%; height:800PX;resize:both;
}
</style>
